import React, { Component } from 'react'
import './4-slider.css'
export default class Slider extends Component {
  state = {
    num : 1
  }
  render() {
    return (
      <div className='slider-container'>
        <div className='slider-wrapper'>
            <img width='100%' src={`/images/${this.state.num}.jpg`} alt="" />
            <div className='btn left' onClick={this.prev}>&lt;</div>
            <div className='btn right' onClick={this.next}>&gt;</div>
        </div>
      </div>
    )
  }
  next = ()=>{
    let {num} = this.state
    if(num >= 5){
      num = 1
    }else{
      num += 1
    }

    this.setState({
      num
    })
  }
  prev = ()=>{
    let {num} = this.state
    if(num <= 1){
      num = 5
    }else{
      num -= 1
    }

    this.setState({
      num
    })
  }
}
